<template>
	<u-popup :show="show" mode="bottom" :closeable="false" :mask-close-able="false">
		<view class="p6">
			<u-search :placeholder="'请输入' + label" v-model:value="keywords" @search="reload" :show-action="false" />
			<view class="fjb mt5">
				<view class="c6">当前选中</view>
				<u-tag v-if="id!==0&&id!==''" :text="name" type="success" closeable @close="id=0" />
				<u-tag v-else text="未选中" type="success" />
			</view>
		</view>
		<view class="pt3 bg-page"/>
		<scroll-view class="wt px6 mh" :scroll-y="true" @scrolltolower="scroll">
			<view v-for="(item,i) in list" :key="i" class="fjb py4 u-border-bottom" @click="choose(item)">
				<view>{{item.name}}</view>
				<u-icon v-if="item.id==id" name="checkbox-mark" color="#00B280" />
			</view>
			<view v-if="loadstate==2&&list.length==0" class="fjc h30">
				<text class="c9">暂无数据</text>
			</view>
			<view v-else-if="loadstate==1&&list.length==0&&page==1" class="fjc h30">
				<text class="icon fs50 c9">&#xe693;</text>
			</view>
			<view v-else-if="loadstate==1&&list.length>0&&page>1" class="fjc py6">
				<text class="icon fs50 c9">&#xe693;</text>
				<text class="ml4 c9">加载中</text>
			</view>
			<view v-else-if="page>1&&list.length>0&&list.length==total" class="fjc py6">
				<text class="c9">到底啦~</text>
			</view>
		</scroll-view>
		<view class="wt py6 fjb">
			<view class="f1 fjc">
				<button type="default" size="mini" @click="show=false">取 消</button>
			</view>
			<view class="f1 fjc">
				<button type="primary" size="mini" @click="confirm()">确 定</button>
			</view>
		</view>
		<view class="h2"/>
	</u-popup>
</template>
<script>
import util from '@/utils/util'
import {page,list} from '@/mixins'

export default {
	mixins: [page,list],
	props: {
		value: {
			type: [String, Number],
			default: 0
		},
		path: {
			type: String,
			default: ''
		},
		label: {
			type: String,
			default: '关键词'
		}
	},
	data(){
		return {
			id: 0,
			name: '',
			keywords:'',
			show: false,
			scrollTop: 0
		}
	},
	methods: {
		choose(item){
			this.id=item.id
			this.name=item.name
		},
		confirm(){
			this.$emit('update:value', this.id)
			this.$emit('update:label', this.name)
			this.$emit('change', this.name)
			this.show = false
		},
		scroll(e){
			if(this.page < Math.ceil(this.total / 10)){
				this.page++
				this.loadstate = 1
				uni.$u.http.get(this.path, {name: this.keywords, page: this.page, id: this.value}).then(res => {
					this.loadstate = 2
					this.list = this.list.concat(res.list)
				}).catch(()=>{})
			}
		},
		reload(){
			this.loadstate = 1
			this.page = 1
			this.list = []
			return uni.$u.http.get(this.path, {name: this.keywords, page: this.page, id: this.value}).then(res=>{
				this.loadData(res)
				this.loadstate = 2
				this.id && this.name && (this.name = res.name)
			}).catch(()=>{})
		}
	},
	watch: {
		show(newVal) {
			if(newVal){
				this.reload()
			}
		}
	}
}
</script>
<style scoped>
.mh{min-height: 30vh;max-height: 50vh;}
</style>